<template>
  <view class="product-detail">
    <!-- 商品信息卡片 -->
    <view class="product-card">
      <!-- 商品封面图片 -->
      <image class="product-image" :src="product.image" mode="aspectFill"></image>

      <!-- 商品标题 -->
      <view class="product-title">{{ product.title }}</view>

      <!-- 商品价格 -->
      <view class="product-price">{{ product.price }}</view>
    </view>

    <view class="justify-content-item tn-text-bold tn-text-xl">
      <text class="tn-icon-title"></text>
      <text class="">宝贝详情</text>
    </view>
    <!-- 商品详细信息卡片 -->
    <view class="product-info-card">
      <!-- 商品简述 -->
      <view class="product-description">
        简述： <p v-html="product.description"></p>
      </view>

      <!-- 商品原料 -->
      <view class="product-ingredients">
        <text>原料：</text>{{ product.ingredients }}
      </view>

      <!-- 商品使用方法 -->
      <view class="product-usage">
        <text>使用方法：</text>{{ product.usageMethod }}
      </view>
	  <view class="product-usage">
	    <text>库存：</text>{{ product.number }}
	  </view>
    </view>
    <tn-goods-nav @buttonClick="buttonClick" class="fixed-bottom" :options="avatarOptions" ></tn-goods-nav>
  </view>
</template>



<script>
import {getHotProducts} from '@/api/Products'
import {createShoppingCart} from "@/api/cart";
import {createOrders} from "@/api/orders";

export default {
  data() {
    return {
      product: {
        coverImage: 'https://s.coze.cn/t/CqiQwUiyyXuiiz0-/%22', // 商品封面图片 URL
        title: '商品标题示例', // 商品标题
        price: '￥99.99', // 商品价格
        description: '这是一段商品的简述，用于描述商品的特点和用途。', // 商品简述
        ingredients: '主要原料：水，甘油，蜂蜜等。', // 商品原料
        usage: '使用方法：每日早晚洁面后，取适量涂抹于面部，轻轻按摩至吸收。' // 商品使用方法
      },
      avatarOptions: [{
        avatar: 'https://resource.tuniaokj.com/images/avatar/xiaomai1.jpg',
        count: 10
      },{
        icon: 'service',
        text: '客服',
        count: 100
      },{
        icon: 'star',
        text: '收藏'
      }],
    };
  },
  onLoad(options) {
    // 获取URL参数中的 id
    const id = options.id;
    this.queryProducts(id);
  },
  methods: {
    buttonClick(number){
      console.log(number)
      if (number.index === 1){
        const orders ={
          productId: this.product.id,
          productName:this.product.title,
          productImage:this.product.image,
          productSpecification:this.product.specification,
          price:this.product.price,
          quantity:1,
        }
        createOrders(orders).then(res=>{
          uni.navigateTo({
            url: `/pages/orders/index?orderId=${res.data.data}`
          });
        })
      }
      if (number.index === 0){
        const productCart ={
          productId: this.product.id,
          productName:this.product.title,
          productImage:this.product.image,
          productSpecification:this.product.specification,
          price:this.product.price,
          quantity:1,
        }
        createShoppingCart(productCart).then(res => {
          console.log(res.data.data)
          if (res.data.code === 0){
            uni.showToast({
              title: '添加购物车成功',
              icon: 'none',
              duration: 2000
            })
          }else{
            uni.showToast({
              title: res.data.msg,
              icon: 'error',
              duration: 2000
            })
          }
        });
      }
    },
    queryProducts(id){
      getHotProducts(id).then(res => {
        console.log(res.data.data)
        this.product = res.data.data
      });
    }
  }
}
</script>

<style scoped lang="scss">
.fixed-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  /* 可以根据需要调整其他样式 */
}
/* 页面容器 */
.product-detail {
  padding: 20rpx;
  background-color: #f7f7f7; /* 设置背景颜色 */
}

/* 商品信息卡片 */
.product-card {
  background-color: #fff; /* 卡片背景色 */
  border-radius: 20rpx; /* 卡片圆角 */
  box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1); /* 卡片阴影 */
  padding: 20rpx;
  margin-bottom: 20rpx; /* 卡片底部外边距 */
}

/* 商品封面图片 */
.product-image {
  width: 100%;
  height: 400rpx;
  border-radius: 20rpx; /* 图片圆角 */
  margin-bottom: 20rpx;
}

/* 商品标题 */
.product-title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  color: #333;
}

/* 商品价格（粉色突出显示） */
.product-price {
  font-size: 48rpx;
  color: #ff4081;
  font-weight: bold;
  margin-bottom: 20rpx;
}

/* 商品详细信息卡片 */
.product-info-card {
  background-color: #fff; /* 卡片背景色 */
  border-radius: 20rpx; /* 卡片圆角 */
  box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1); /* 卡片阴影 */
  padding: 20rpx;
}

/* 商品简述 */
.product-description {
  font-size: 28rpx;
  color: #000; /* 字体颜色设置为黑色 */
  margin-bottom: 20rpx;
}

/* 商品原料 */
.product-ingredients {
  font-size: 28rpx;
  color: #000; /* 字体颜色设置为黑色 */
  margin-bottom: 20rpx;
}

/* 商品使用方法 */
.product-usage {
  font-size: 28rpx;
  color: #000; /* 字体颜色设置为黑色 */
  margin-bottom: 20rpx;
}
</style>


